<template>
    <main-wrap>
        <template v-slot:header>
            <Header title="关于我们"/>
        </template>
        <div class="loginBox">
            <div class="logo">
                <img src="/images/logo2.png"/>
            </div>
            <div class="logMain">
                <ul class="showItem">
                    <li>
                        <router-link to="/home/edition">
                            <label>日志版本</label>
                            <span><img src="/images/rjt.png" alt=""></span>
                        </router-link>
                    </li>
                    <li>
                        <a href="https://www.tst.metayuanjie.com/">
                            <label>元界官网</label>
                            <span><img src="/images/rjt.png" alt=""></span>
                        </a>
                    </li>
                </ul>
                <div class="gggg" @click="cleargg"></div>
                <div class="btnBox">
                    <my-button text="退出登录" @click="logout"/>
                </div>
                <div class="btnBox btnBox2">
                    <my-button text="注销用户" @click="destroyUser"/>
                </div>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import myButton from '@/components/myButton.vue'
import Header from '@/components/header.vue'
import { Dialog } from 'vant';
import {toast,H5CallAPPFuction} from '@/utils/common'
import Cookies from '@/utils/auth'
export default {
    components:{
        mainWrap,
        myButton,
        Header
    },
    setup(){
        const router = useRouter()
        const {proxy} = getCurrentInstance()
        const store = useStore()

        const state = reactive({
            
        })

        const logout = ()=>{
            Dialog.confirm({
                title: '提示信息',
                message:'确定退出登录？',
            })
            .then(async() => {
                const res = await store.dispatch("arApi/signOut")
                if(res.success){
                    Cookies.remove('token')
                    Cookies.remove('userInfo')
                    H5CallAPPFuction('signOut')  // 调用app的signOut方法
                }
                
            })
            .catch(() => {
                console.log('cancel')
            });
            
        }

        const destroyUser = ()=>{
            Dialog.confirm({
                title: '提示信息',
                message:'确定注销当前用户？',
            })
            .then(async () => {
                const res = await store.dispatch("arApi/destroy_user")
                if(res.success){
                    Cookies.remove('token')
                    Cookies.remove('userInfo')
                    H5CallAPPFuction('signOut')  // 调用app的signOut方法
                }
                
            })
            .catch(() => {
                console.log('cancel')
            });
        }

        const cleargg = ()=>{
            H5CallAPPFuction('cleanWebCache') 
        }

        return{
            ...toRefs(state),
            logout,
            cleargg,
            destroyUser
        }
    }
}
</script>

<style lang="scss" scoped>
    .loginBox{
        padding: 0;
        .logo{
            width: 173px;
            height: 279px;
            margin: 0 auto;
            margin-top:110px ;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .logMain{
            padding:120px 40px 0 40px;
            .showItem{
                list-style: none;
                font-size: 30px;
                li{
                    border-top: 1px solid rgba(217, 217, 217, 0.3);
                    &:last-child{
                        border-bottom: 1px solid rgba(217, 217, 217, 0.3);
                    }
                    a{
                        display: flex;
                        height: 101px;
                        line-height: 100px;
                        label{
                            flex: 1;
                            color: var(--baseColor);
                        }
                        span{
                            display: flex;
                            justify-content:end; 
                            align-items: center; 
                            img{
                                width: 12px;
                                height: 20px;
                            }
                        }
                    }  
                }
            }
            .btnBox2{
                padding-top: 60px;
                .myBtn{
                    color: #696969;
                }
            }
            .gggg{
                height: 100px;

            }
        }
    }
</style>
